<template>
    <div class="container">
    

        <nav class="header">
            <div class="header_left">
                <div class="logo">
                    满井智信
                </div>
            </div>
    
            <div class="header_right">
                <Dropdown class="personInfo" v-on:on-click="loginOut()">
                    <div>
                        <span>葫芦侠</span>
                        <Icon type="happy" size="25"></Icon>
                    </div>
    
                    <Dropdown-menu slot="list">
                        <Dropdown-item>我的消息</Dropdown-item>
                        <Dropdown-item>个人设置</Dropdown-item>
                        <Dropdown-item divided>退出</Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </div>
    
        </nav>
 

        <nav class="menu-left">
            <Menu theme="dark" width="auto" name="menu" v-on:on-select="(name)=>{selectChanged(name)}">
    
                <Submenu v-for="(item,index) in $router.options.routes" v-if="!item.hidden" v-bind:name="index" :key="index">
                    <template slot="title">
                        <Icon type="ios-navigate" v-bind:type="item.iconType"></Icon>
                        {{item.name}}
                    </template>
    
                    <router-link v-for="(child,index2) in item.children" v-bind:to="child.path" :key="index2">
                        <Menu-item v-bind:name="item.name + '-' + child.name">{{child.name}}</Menu-item>
                    </router-link>
                </Submenu>
    
            </Menu>
        </nav>

        <div class="content">
            <Row class="layout-breadcrumb">
                <Breadcrumb>
                    <Breadcrumb-item href="#">{{selectPath}}</Breadcrumb-item>
                    <Breadcrumb-item>{{selectName}}</Breadcrumb-item>
                </Breadcrumb>
            </Row>
            <div class="br">
                <hr>
            </div>
            <Row>
                <i-col class="layout-content">
                    <div class="layout-content-main">
                        <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </div>
                </i-col>
            </Row>
    
        </div>
    </div>
</template>
<script>


import storage from '../storage/storage.js'


export default {

    data() {
        return {
            spanLeft: 5,
            spanRight: 19,
            selectPath: '学院管理',
            selectName: '基础数据管理 '

        }
    },
    computed: {
        iconSize() {
            return this.spanLeft === 5 ? 14 : 24;
        }
    },
    methods: {
        toggleClick() {
            if (this.spanLeft === 5) {
                this.spanLeft = 2;
                this.spanRight = 22;
            } else {
                this.spanLeft = 5;
                this.spanRight = 19;
            }
        },
        selectChanged: function (name) {
            if (name) {
                var arr = name.split('-');
                if (arr) {
                    this.selectPath = arr[0];
                    this.selectName = arr[1];
                }


            }

        },
        //退出
        loginOut: function () {
            storage.removeUser();
            this.$router.push({ path: '/login' });
            //window.location.href = "/#/login"          
        }
    }
}
</script>

<style scoped>
.container {
    top: 0px;
    bottom: 0px;
    width: 100%;
}


.header {
    height: 60px;
    background-color: #373d41;
    width: 100%;
    line-height: 60px;

}

.header .logo {
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
    border-color: rgba(238, 241, 146, 0.3);
    border-right-width: 1px;
    border-right-style: solid;

    color: #9EA7B4;
}

.header .header_left {
    width: 210px;
    float: left;
}

.header .header_right {
    height: 60px;
    float: right;
    margin-right: 25px;
}

.header .header_right .personInfo {
    float: right;
    color: #9EA7B4;
    font-size: 16px;
}

.header .header_right .personInfo Icon {
    height: 60px;
}

.menu-left {
    width: 210px;
    float: left;
    position: absolute;
    top: 60px;
    bottom: 0px;
    height:100%;
    background-color: #464c5b;
}

.content {

    margin-left: 210px;
}

.content .layout-breadcrumb {

    height: 30px;
    margin-left: 30px;
    margin-top: 20px;

}

.content .layout-content {
    min-height: 200px;
    margin: 5px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

.content .layout-content-main {
    padding: 5px;
}
.br{
	width: 100%;
	height: 10px;
}
</style>